<template>
  <div class="exception-handle">
    <div class="exception-header">
      <el-form :inline="true" :model="queryForm" class="adjustCondition">
        <el-form-item label="过磅时间:">
          <el-date-picker
              class="adjustDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="dateInput"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="exception-keyword" label="关键字:">
          <el-input v-model="queryForm.keyword" placeholder="请输入关键字查询"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select clearable v-model="queryForm.transProps" placeholder="全部">
            <el-option
                v-for="item in  $dictUtils.getDictList('transProps')"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search-btn" @click="getList">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="clear">
      <div class="exception-table-title">
        共<span> {{ page.total }} </span>条过磅单，其中已完成<span style="color: #1890FF"> {{ this.completedCount }} </span>条，未完成<span
          style="color: #FF3E3E"> {{ this.noCompletedCount }} </span>条
      </div>
      <section class="right-but" style="display:flex;">
        <el-button type="text" style="margin-right:-13px;cursor:pointer;"
                   @click="refreshList"
        >
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png">
        </el-button>
        <PopoverBut :checkedProps="checkedProps" style="" :options="options"
                    @getCheckeds="handlerCloumn"></PopoverBut>

      </section>
    </div>
    <div class="exception-table">

      <div class="exception-table-content">
        <el-table
            :data="tableData"
            stripe
            border
            v-loading="loading"
            style="width: 100%">
          <el-table-column type="index" label="序号" width="70"></el-table-column>
          <el-table-column label="过磅编号" prop="weightCode" min-width="180">
            <template slot-scope="scope">
              <el-link :underline="false" type="primary" @click="viewDetail(scope.row)">{{ scope.row.weightCode }}
              </el-link>
            </template>
          </el-table-column>

          <el-table-column label="客户名称" min-width="200">
            <template slot-scope="scope">
              <p v-if="scope.row.business && scope.row.business.companyName">{{ scope.row.business.companyName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" min-width="140">
            <template slot-scope="scope">
              <p v-if="scope.row.product && scope.row.product.name">{{ scope.row.product.name }}</p>
            </template>
          </el-table-column>
          <el-table-column label="车牌号" min-width="120">
            <template slot-scope="scope">
              <p v-if="scope.row.transport && scope.row.transport.truckNumber">{{ scope.row.transport.truckNumber }}</p>
              <p v-if="scope.row.axle && scope.row.axle.axle">({{ scope.row.axle.axle }})</p>
            </template>
          </el-table-column>
          <!--          <el-table-column label="车轴类型" prop="axle.axle" width="100"></el-table-column>-->
          <el-table-column label="毛重" prop="weightGross" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.weightGross| thousandSep }}
            </template>
          </el-table-column>
          <el-table-column label="皮重" prop="weightTare" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.weightTare | thousandSep }}
            </template>
          </el-table-column>
          <el-table-column label="净重" prop="netWeight" min-width="80">
            <template slot-scope="scope">
              {{ scope.row.netWeight | thousandSep }}
            </template>
          </el-table-column>
          <el-table-column label="皮重时间" width="140">
            <template slot-scope="scope">
              <span v-if="scope.row.tare && scope.row.tare.weightTime">{{ scope.row.tare.weightTime | noValue }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <span v-for="(item, index) in checkedProps" :key="index">
            <el-table-column :label="item" v-if="item ==='业务编号'" min-width="140">
              <template slot-scope="scope">
                <p v-if="scope.row.business && scope.row.business.codes">{{ scope.row.business.codes }}</p>
              </template>
            </el-table-column>
          <el-table-column :label="item" v-if="item ==='数据类别'" prop="business.dataType" min-width="140">
            <template slot-scope="scope">
              <p v-if="scope.row.business && scope.row.business.dataType">{{ $dictUtils.getDictLabel("dataType", scope.row.business.dataType, "") | noValue }}</p>
            </template>
          </el-table-column>
            <el-table-column :label="item" v-if="item === '毛重时间'" prop="gross.weightTime" width="140">
              <template slot-scope="scope">
                <span
                    v-if="scope.row.gross && scope.row.gross.weightTime">{{ scope.row.gross.weightTime | noValue }}</span>
                <span v-else>--</span>
              </template>
          </el-table-column>
            <el-table-column prop="createBy.loginName" min-width="110px" :label="item" v-if="item ==='创建人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.createBy && scope.row.createBy.loginName">
                       {{ scope.row.createBy.loginName | noValue }}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="createDate" :label="item" width="140px" v-if="item==='创建时间'">
            <template slot-scope="scope">
                {{ scope.row.createDate | noValue }}
            </template>
        </el-table-column>
        <el-table-column prop="updateBy.loginName" min-width="120px" :label="item" v-if="item==='上次操作人'">
              <template slot-scope="scope">
                  <span v-if="scope.row.updateBy && scope.row.updateBy.loginName">
                     {{ scope.row.updateBy.loginName | noValue }}
                  </span>
                  <span v-else>--</span>
              </template>
          </el-table-column>
          <el-table-column prop="updateDate" :label="item" width="140px" v-if="item==='上次操作时间'">
              <template slot-scope="scope">
                  {{ scope.row.updateDate | noValue }}
              </template>
          </el-table-column>
          </span>
          <el-table-column label="操作" width="108">
            <template slot-scope="scope">
              <!--              <el-link type="primary" @click="viewDetail(scope.row)">详情</el-link>-->
              <el-link type="primary" @click="operateList(scope.row.truckTrailId)" :underline="false">操作记录</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            :current-page="page.pageNo"
            layout="total,sizes,prev, pager, next, jumper"
            :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
    <!--    <OperateDetail ref="operateDetail"></OperateDetail>-->
    <!--    <Details ref="details"></Details>-->
  </div>
</template>

<script>
import {getList} from '@/api/weightingManagent/weight.js'
import OperateDetail from './operateDetail'
import Details from './details'
import PopoverBut from '@/components/button/popoverBut'
import Template from '../../form/template'

const options1 = []
export default {
  components: {
    Template,
    OperateDetail,
    Details,
    PopoverBut
  },
  data () {
    return {
      loading: false,
      dateInput: '',
      value1: [],
      input: '',
      checked: true,
      tableData: [],
      completedCount: 0,
      noCompletedCount: 0,
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      queryForm: {
        keyword: '',
        startTime: '',
        endTime: '',
        processType: 1,
        transProps: ''
      },
      checkedProps: options1,
      options: [
        {label: '业务编号', key: 'business.codes'},
        {label: '数据类别', key: 'business.dataType'},
        {label: '毛重时间', key: 'gross.weightTime'},
        {label: '创建人', key: 'createBy.loginName'},
        {label: '创建时间', key: 'createDate'},
        {label: '上次操作人', key: 'updateBy.loginName'},
        {label: '上次操作时间', key: 'updateDate'}
      ],
      orderBy: {
        name: 'create_date',
        method: 'desc'
      }
    }
  },
  methods: {
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList()
    },
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getList()
    },
    // 是否显示某列数据
    handlerCloumn (e) {
      this.checkedProps = e
      // console.log(e)
    },
    refreshList () {
      this.getList()
    },
    viewDetail (row) {
      this.$refs.details.init('view', row)
    },
    // 发卡记录
    operateList (row) {
      this.$refs.operateDetail.init('send', row)
    },
    reset () {
      this.queryForm.keyword = ''
      this.queryForm.startTime = ''
      this.queryForm.endTime = ''
      this.dateInput = ''
      this.queryForm.transProps = ''
    },
    // 获取列表带分页
    getList () {
      this.loading = true
      this.$api.getData('contList',{
        // pageSize: this.page.pageSize,
        // pageNo: this.page.pageNo,
        // orderBy: this.orderBy.name,
        // orderByAORC: this.orderBy.method,
        // keyword: this.queryForm.keyword,
        // startTime: this.dateInput == null ? null : this.dateInput[0],
        // endTime: this.dateInput == null ? null : this.dateInput[1],
        // processType: this.queryForm.processType,
        // transProps: this.queryForm.transProps
        accId: '',
        cargoId: '',
        comId: '',
        confType: 0,
        contCode: '',
        contState: '',
        dataType: '',
        dataVal: 9,
        eTime: '2022-02-28 00:00:00',
        pn: 1,
        ps: 5,
        sTime: '2022-02-01 00:00:00'
      }).then((res) => {
        console.log(res)
        if (res.code === '200') {
          this.tableData = res.data.list
          this.page.total = res.data.count
          this.completedCount = res.data.completedCount
          this.noCompletedCount = res.data.noCompletedCount
          this.loading = false
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/config.scss';

.exception-handle {
  .exception-header {
    ::v-deep.el-form {
      .el-form-item {
        margin-right: 50px;
        margin-bottom: 20px;
      }

      .el-form-item:last-child {
        margin-right: 0;
      }

      .exception-keyword {
        .el-input__inner {
          width: 230px;
        }
      }
    }
  }

  .clear {
    display: flex;
    display: -webkit-flex;
    margin-bottom: 10px;

    & > div {
      flex: 1;
      color: #999999;
      font-size: 14px;
      align-self: flex-end;
    }
  }

  .clear:after {
    clear: both;
    content: '';
    display: table;
  }

  ::v-deep.exception-table {
    .el-table__header-wrapper {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
    }

    .el-table__row {
      td:not(:last-child) {
        .el-link--inner {
          margin-right: 0 !important;
        }

        /*padding: 0;*/
        /*border-color: #dddddd;*/
      }
    }
  }

}
</style>
